<template>
  <div id="dv-screen-container" :style="styleObject" ref="fullScreenContainer">
    <template v-if="state.ready">
      <slot />
    </template>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, onUnmounted, computed } from "vue";
import autoResize from "/@/utils/autoResize";

const fullScreenContainer = ref<HTMLElement | null>(null);

const state = reactive({
  allWidth: 0,
  scale: 0,
  datavRoot: "",
  ready: false,
});

const initConfig = () => {
  // const { width, height } = screen

  // 原始屏幕
  // let width = 1920
  // let height = 1080

  // 方便修改
  let width = 1920;
  let height = 1080;

  // 显示六个的
  // let width = 5800
  // let height = 2000

  // 显示3个的
  // let width = 3200
  // let height = 1000

  state.allWidth = width;

  if (fullScreenContainer.value) {
    fullScreenContainer.value.style.width = `${width}px`;
    fullScreenContainer.value.style.height = `${height}px`;
  }
};

const setAppScale = () => {
  const currentWidth = document.body.clientWidth;
  if (fullScreenContainer.value)
    fullScreenContainer.value.style.transform = `scale(${
      currentWidth / state.allWidth
    })`;
};

const onResize = () => {
  setAppScale();
};

// const afterAutoResizeMixinInit = () => {
//   initConfig()
//   setAppScale()

//   state.ready = true
// }

// autoResize(fullScreenContainer, onResize, afterAutoResizeMixinInit)

let that = reactive({
  width: 1920,
  height: 1080,
  scaleX: null,
  scaleY: null,
});
let styleObject = computed(() => {
  let obj = {
    transform: `scale(${that.scaleX},${that.scaleY}) translate(-50%, -50%)`,
    WebkitTransform: `scale(${that.scaleX},${that.scaleY}) translate(-50%, -50%)`,
    width: that.width + "px",
    height: that.height + "px",
  };
  state.ready = true;
  return obj;
});

const getScale = () => {
  // 分别计算X轴和Y轴的缩放比例
  that.scaleX = window.innerWidth / that.width;
  that.scaleY = window.innerHeight / that.height;
};
const setScale = () => {
  setTimeout(() => {
    getScale();
  }, 500);
};

onMounted(() => {
  getScale();
  window.addEventListener("resize", setScale);
});

onUnmounted(() => {
  window.addEventListener("resize", setScale);
});
</script>

<style lang="scss" scoped>
#dv-screen-container {
  // position: fixed;
  // top: 0px;
  // left: 0px;
  // overflow: hidden;
  // transform-origin: left top;
  // z-index: 999;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 999;
  transition: 0.3s;
  transform-origin: left top;
  overflow: hidden;
}
</style>
